﻿@model Leads360Express.Repository.Pages.LeadSource.LeadSourceModel
@{
    ViewBag.Title = "Add Lead Source";
    Layout = "~/Views/Shared/_Layout..cshtml";
}

	<form method="POST" class="form">
		<fieldset id="CreateLeadSourceForm">
						
			<div class="content">
				<h2 class="app">
					<strong>Add Lead Source</strong>
					@Html.Partial("_PatialLeads_Calls", @Model.LeadCall )
				</h2>
                <div class="title nomargin">
					<h3>Add Lead Source</h3>
                </div>
								
                <div class="panel grouped-form rounded">
                
                    <ul class="accordeon-tabs accordeon-2">
                    <li class="open">
                        <span class="panel">
                        <p data-bind="visible: HasWebformTypeMessage" style="display: none">We’ll send helpful instructions on how to create a form for lead generation.  Enter one or more email addresses below for your team members who will want these instructions sent to them. (You can enter multiple email addresses separated by commas.)</p>
                        <div class="row" id="rowTitle">
                            <label for="text1">Title:</label>
                            <input class="text" type="text" id="Title" data-bind="value: Title, attr: {maxlength: 50}" />
                        </div>
                        <div class="row">
                            <label for="text1">Type:</label>
                            <div class="select-holder">
                            <select id="Type" class="select" style="width: 188px; " data-bind='value: Type, foreach: TypeOptions'>
                                <option data-bind="value: SelectId, text: Title"></option>
                            </select>
                            </div>
                        </div>
                        <div class="row" id="rowLeadSeller" data-bind="visible: HasInternetTypeSeller" style="display: none">
                            <label for="text1">Lead Seller:</label>
                            <div class="select-holder" style="width:425px;">
                            <select id="LeadSeller" class="select" style="width:425px;" data-bind='value: LeadSeller, foreach: LeadSellerOptions' >
                                <option data-bind="value: SelectId, text: Title"></option>
                            </select>
                            </div>
                        </div> 
                        <div class="row" id="rowInboundPhone" data-bind="visible: HasInboundCallType" style="display: none">
                            <label for="text1">Inbound Phone Number:</label>
                            <div class="select-holder">
                                <select id="InboundPhone" class="select" data-bind='value: InboundPhone, options: InboundPhoneOptions, optionsCaption: "Select Phone Number"'>
                                    <option>Select Phone Number</option>
                                </select>
                            </div>
                            <a href="#" id="btnProvisionDialIQ" class="btn btn-provision" data-bind="click: ProvisionDialIQ">Provision</a>
                        </div>
                        <div class="row" data-bind="visible: ShowProvisionDialIQ" style="display: none">
                          <label for="text1">Provision Inbound Number:<br><span style="font-weight: normal;">(Cost is $2.00 per number per month.)</span></label>
                          <div class="field-wrapper">
                            <span class="field-error" data-bind="text: ErrorGetNumberLocal, visible: ShowErrorGetNumberLocal"></span>
                            <div class="field-wrapper-content">
                            <div class="fwrow">
                              <label class="label"><input type="radio" data-bind="checked: DialIQType" value="local" name="DialIQType" class="radio" /> Local</label>
                              <span data-bind="visible: ShowLocalPane() && (DialIQType() != undefined)">
                                  <span data-bind="visible: ShowLocalDialIQButton">
                                      <label class="label local-area">
                                        Area: <input id="AreaCodeInput" type="text" class="text small" value="" maxlength="3" onkeypress="return isAreaKey(event)" onkeyup="return getNumberKeyUp(event)" />
                                      </label>
                                      <a href="javascript:void(0);" id="LocalDialIQButton" class="btn btn-getnumber-gray" data-bind="click: GetNumberLocalType">Get Number</a>
                                  </span>
                                  <span class="green" data-bind="visible: ShowLocalDialIQResult"><strong><span data-bind="text: LocalDialIQResult" class="right-number"></span></strong></span>
                              </span>
                            </div>
                            <div class="fwrow">
                              <label class="label"><input type="radio" data-bind="checked: DialIQType" value="tollfree" name="DialIQType" class="radio" /> Toll Free</label>
                               <a href="##" class="info" title="Click the button to get a toll free number. When provisioning toll free numbers it is not possible to select a prefix."><em>info</em></a>
                              <span data-bind="visible: (ShowLocalPane() ? false : true) && (DialIQType() != undefined)">
                                  <a href="#" class="btn btn-getnumber-blue nofloat" data-bind="click: GetNumberTollfreeType, visible: ShowTollfreeDialIQButton">Get Number</a>
                                  <span class="green" data-bind="visible: ShowTollfreeDialIQResult"><strong><span data-bind="text: TollfreeDialIQResult" class="right-number"></span></strong></span>
                              </span>
                            </div>
                            </div>
                          </div>
                        </div>  
                        <div class="row" data-bind="visible: IsEmptyType" style="display: none">
                            <label for="text1">Cost per Lead:<br><span style="font-weight: normal;">(optional)</span></label>
                            <div class="groupinput">
                                <div id="formLeadSource">
                                    <span id="rowSourceCost"><input type="hidden" class="hidden" data-bind="value: SourceCostHidden"/></span>
                                    <div class="input-holder" style="width: 400px">
                                        <input class="text dollar" type="text" id="SourceCost" style="width:69px;margin-right:5px;" data-bind="value: SourceCost, attr: {maxlength: 10}" onkeypress="return isCostKey(event)"  /> 
                                        <a href="##" class="info" title="Enter your expected cost for leads from this source."><em>info</em></a>                                        
                                    </div>
                                </div>
                            </div>
                        </div> 
                        <div class="row" data-bind="visible: HasSendMail" style="display: none">
                          <label for="text1" style="float: left;padding-top:9px;">Email Addresses To Send Instructions:</label>

                          <span style="display: block;float: left">
                              <span data-bind="visible: ShowErrorEmailMessage"><span data-bind="text: ErrorEmailMessage" style="color: #D7494E;font-weight: bold;clear: right;margin-bottom: 3px;"></span><br /></span>
                              <input id = "EmailAddress" data-bind="value: EmailAddress" class="text" type="text" id="text1" style="width: 500px;" />
                              <a data-bind="visible:HasSendMailButton" href="#" class="btn btn-send-email" style="float: none; vertical-align: middle">Send Email</a>
                          </span>
                          <div class="clear"></div>
                        </div>              
                        </span>
                    </li>
                    </ul>                  
                </div>
                
                <h3 class="centered-wbtn centered-wbtn-bottom save">
  				    <span>
  				        <a href="/LeadSource" class="btn btn-cancel-page">previous</a>
					    <a class="btn btn-submit-page" href="javascript:void(1);" data-bind="click: createLeadSource">next</a>
                    </span>
                </h3>
                <div class="clear"></div>
                @Html.Partial("_Footer.Copyright")
			</div><!-- //.content -->

            <div class="popup-wrapper" id="popup-SendMail" style="display:none">
                <div id="CompleteSendMail">
                    <p class="adduser" style="font-size: 22px">Email has been sent.</p>
                    <div class="btns">
		                <a href="javascript:void(0);" onclick="jQuery.fancybox.close()" class="btn btn-continue">Continue</a>
                    </div>
                </div>
            </div>

            <div class="popup-wrapper" id="popupError" style="display:none">
                <div class="popup-content">
                    <h4 data-bind="text: msgInboundNumberLimited"></h4>
                    <p class="last">
                        <a href="javascript:closePopup();" class="btn btn-closeSignup center">Close</a>
                    </p>
                </div>
            </div>

            <div class="popup-wrapper" id="popupErrorNetwork" style="display:none">
                <div class="popup-content">
                    <h4>This information is currently not available because of a problem with the network or server.</h4>
                    <h4>Please try again in a few moments.</h4>
                    <p class="last">
                        <a href="javascript:closePopup();" class="btn btn-closeSignup center">Close</a>
                    </p>
                </div>
            </div>
            
		</fieldset>
	</form>

<script type="text/javascript">
    var data = @(Html.Raw(Json.Encode(Model)));
</script>
<script src="/Scripts/viewModel/leadSourceViewModel.js" type="text/javascript"></script>